<template>
  <div  class="addArticle">
    <el-header style="line-height:60px">
      <h2>用户列表</h2>
    </el-header>
    <div>
        <el-row>
          <el-form ref="form" :model="form" label-width="60px">
        <el-col :span="6">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col  :span="4">
        <el-form-item>
        <el-button icon="el-icon-search" circle type="primary" @click="onSubmit"></el-button>
         </el-form-item>
         </el-col>
          </el-form>
      </el-row>
      <div id="maintable">
        <el-row>  
            <el-col :span="20">
                <p class="title"><i class="el-icon-tickets"></i>用户列表</p>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" plain @click="download()">导出Excel<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-col>
          
        <el-table
          border
          :data="tableData"
          v-loading="loading"
          style="width: 100%">
          <el-table-column
            prop="user_id"
            label="用户编号"
            sortable
            width="auto"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="用户状态"
            width="80"
          >
              <el-switch
                v-model="tableData.status"
                disabled>
              </el-switch>
          </el-table-column>
          <el-table-column
            prop="roleIdList"
            label="roleIdList"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="deptId"
            label="部门编号"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门名称"
            width="100"
          >
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete" 
                circle
                slot="reference"
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      search: '',
      tableData: [],
      dialogFormVisible: false,
      form:{
          username:"",
          email:"",
          mobile:"",
      },
      formLabelWidth: '120px',
      loading:true,
      visible:false,
      value1:true,
      value2:false
    }
  },
  methods: {
    handleEdit (index, row) {
      this.form = row;
       this.dialogFormVisible = true
    },
    searchByPrimary(){
      this.$http.get('/api/finduserlot1')
        .then(response=> {
        })
    },
    download(){
       this.$http.post('/api/getuserexcel').then(resp=>{
         if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            let blob = new Blob([resp.data])
            window.navigator.msSaveOrOpenBlob(blob, '用户列表.xls')
          } else {
          /* 火狐谷歌的文件下载方式 */
            var blob = new Blob([resp.data])
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob)
            downloadElement.href = href
            downloadElement.download = '用户列表.xls'
            document.body.appendChild(downloadElement)
            downloadElement.click()
            document.body.removeChild(downloadElement)
            window.URL.revokeObjectURL(href)
          }
       });
    },
    onSubmit(){
      this.$http.post('/api/finduserlot1',this.form
              //  this.qs.stringify(this.form),
              //  {headers:{
              //    'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
              //  }}
                )
          .then(response=>{
            this.tableData = response.data.data
            this.loading = false
            for(let key  in this.tableData){
              if(key == 'status'){
                if(this.tableData[key]=='1')
                this.tableData.status = true
              }else{
                this.tableData.status = false
              }
            }
          }).catch(error=>{console.log(error)})
    } ,
    handleDelete (index, row) {
      this.$confirm('确认删除该条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row.user_id)
          return this.$http.put('/api/deleteuserbyid',{"user_id":row.user_id},
                      {headers:{
                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
                      }}).then((data)=>{
                        console.log(data)
                        if(data.data.code=='115'){
                            this.$message({
                            type: 'success',
                            message: '删除成功！'
                          });
                          this.tableData = response.data.data
                          this.loading = false
                          for(let key  in this.tableData){
                            if(key == 'status'){
                              if(this.tableData[key]=='1')
                              this.tableData.status = true
                            }else{
                              this.tableData.status = false
                            }
                          }
                        }else{
                          this.$message({
                            type: 'error',
                            message: "删除失败！"
                          });
                        }
                        
                      })
          }).catch(()=>{
            this.$message({
            type: 'error',
            message: '删除失败！'
          });
          })
    }
  },
  created(){
    this.$http.get('/api/finduserlot')
        .then(response=> {
          if(response.data.code=='112'){
              this.tableData = response.data.data
              this.loading = false
              for(let key  in this.tableData){
                if(key == 'status'){
                  if(this.tableData[key]=='1')
                  this.tableData.status = true
                }else{
                  this.tableData.status = false
                }
              }
          }else{
            this.$message({
            type: 'error',
            message: response.data.message
          })
          }
        })
        .catch(function (error) {
          console.log(error);
        });
  }
}
</script>

<style lang="scss" scoped="scoped">
  
</style>
